<div class="withdrawal-header">
  <div nz-row class="header-head">
    <div class="head-bark" nz-col nzSpan="2" routerLink="account">
      <i nz-icon type="left"></i>
    </div>
    <div nz-col nzSpan="20">
      <h3>提现</h3>
    </div>
  </div>
</div>


<nz-content *ngIf='!_isShowSuccess' class="withdrawal-body">

  <div class="bank-card-container">
    <div class="bank-card-body">
      <app-banks-cards [(bankList)]='_pageData.bankList' (selEvent)="selBankCard($event)"></app-banks-cards>

      <div style="margin-top:10px;height: 20px;" *ngIf="_pageData.bankList && _pageData.bankList.length > 0">
        <a *ngIf="_pageData.bankList.length > 3 || _pageData.bankList.length == 3"
          style="margin-left:8px;font-size:14px;" (click)="toggleCollapse()">
          全部收款银行
          <i nz-icon [type]="isCollapse?'down':'up'"></i>
        </a>
        <a style="height:20px;margin-right:18px;font-size:14px;float: right;" target="_bank"
          routerLink="/act/myacy/banks">
          管理收款银行
        </a>
      </div>
    </div>
  </div>

  <div class="withdrawal-from-container">
    <form nz-form [formGroup]="validateForm">

      <nz-form-item>
        <nz-form-label [nzSpan]="24" nzRequired>提现金额</nz-form-label>
        <nz-form-control [nzSpan]="24" nzHasFeedback>
          <input nz-input type="text" onkeyup="value=value.replace(/[^\d]/g,'')" [(ngModel)]="_amount"
            formControlName="amount" placeholder="请输入转账金额" nzRequired autocomplete="off">
          <nz-form-explain style="color:red " *ngIf="validateForm.get('amount').dirty&&validateForm.get('amount').errors">
            <ng-container *ngIf="validateForm.get('amount').hasError('required')">
              请输入转账金额
            </ng-container>
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>

      <div class="withdrawal-from-item-1">
        <div nz-row>
          <p nz-col [nzSpan]="20">余额 {{_pageData.availableBalance}}</p>
          <span nz-col style="float: right;" (click)="getAll(validateForm.value)">全部</span>
        </div>
        <div>
          手续费 {{validateForm.get('amount').value | getCommission : _coinData | number }}
        </div>
      </div>

      <nz-form-item>
        <nz-form-label [nzSpan]="24" nzRequired>支付密码</nz-form-label>
        <nz-form-control [nzSpan]="24" nzHasFeedback>
          <input nz-input type="password" formControlName="fundPwd" placeholder="请输入交易密码" maxlength="6" nzRequired
            autocomplete="off">
          <nz-form-explain style="color:red"
            *ngIf="validateForm.get('fundPwd').dirty&&validateForm.get('fundPwd').errors">
            <ng-container *ngIf="validateForm.get('fundPwd').hasError('required')">
              请输入交易密码
            </ng-container>
            <ng-container *ngIf="validateForm.get('fundPwd').hasError('pattern')">
              密码格式不正确
            </ng-container>
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>

    </form>
    <div class='sub-container'>
      <button nz-button [disabled]="!validateForm.valid || !_selCard.id" nzType="primary"
        (click)="handleOk(validateForm.value)">确认提现</button>
    </div>
  </div>
</nz-content>

<!-- 提現成功后 -->
<nz-content *ngIf='_isShowSuccess' class="withdrawal-Success-container">

  <div class="withdrawal-Success-body">
    <div class="withdrawal-Success-msg">
      <div style="padding-bottom:20px">
        <img *ngIf='_successPageData.status == "PENDING"' src="../../../../assets/img/updateSuccess.png" alt="">
        <!-- <img *ngIf='_successPageData.status == "COMPLETED"' src="../../../../assets/img/success.png" alt=""> -->
      </div>
      <div>
        <p *ngIf='_successPageData.status == "PENDING"'>提现申请已提交</p>
        <!-- <p *ngIf='_successPageData.status == "COMPLETED"'>提现申请已提交</p>  -->
      </div>
      <div class="msg-xq">
        <p *ngIf='_successPageData.status == "PENDING"'>提现申请已提交，申请将会在2个工作日内完成</p>
        <!-- <p *ngIf='_successPageData.status == "COMPLETED"'>提现申请已提交</p>  -->
      </div>
      <div>
        <h2>{{_successPageData.amount | currency : '¥'}}</h2>
      </div>
    </div>

    <div class="withdrawal-Success-list">
      <div nz-row>
        <P nz-col [nzSpan]="12"> 手续费</P>
        <P nz-col [nzSpan]="12" style="text-align: right;">{{_successPageData.withdrawalFee | currency : '¥'}}</P>
      </div>
      <div nz-row>
        <P nz-col [nzSpan]="12"> 实 付</P>
        <P nz-col [nzSpan]="12" style="text-align: right;">
          {{(_successPageData.amount + _successPageData.withdrawalFee | currency : '¥')}}</P>
      </div>
    </div>

    <div class='sub-container'>
      <button nz-button nzType="primary" routerLink="account">返回个人中心</button>
    </div>
  </div>

</nz-content>



<nz-modal nzWidth="446px" class="banks-from" [(nzVisible)]="isVisible" [nzTitle]="modalTitle" [nzContent]="modalContent"
  [nzFooter]="null" [nzClosable]='false'>
  <ng-template #modalTitle>
    <h4>新建收款银行</h4>
  </ng-template>

  <ng-template #modalContent>
    <form nz-form [formGroup]="bankForm">

      <nz-form-item>
        <nz-form-label [nzSpan]="24" nzRequired>户主</nz-form-label>
        <nz-form-control [nzSpan]="24" nzHasFeedback>
          <input nz-input formControlName="bankAccountName" placeholder="请输入户主" nzRequired>
          <nz-form-explain *ngIf="bankForm.get('bankAccountName').dirty&&bankForm.get('bankAccountName').errors">请输入户主名
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="24" nzRequired>收款银行</nz-form-label>
        <nz-form-control [nzSpan]="24" nzHasFeedback>
          <input nz-input formControlName="bankName" placeholder="请输入收款银行名称" nzRequired>
          <nz-form-explain *ngIf="bankForm.get('bankName').dirty&&bankForm.get('bankName').errors">请输入收款银行名称
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="24">支行</nz-form-label>
        <nz-form-control [nzSpan]="24">
          <input nz-input formControlName="bankSubBranch" placeholder="请输入支行信息">
          <nz-form-explain *ngIf="bankForm.get('bankSubBranch').dirty&&bankForm.get('bankSubBranch').errors">请输入支行信息
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="24" nzRequired>收款银行账号</nz-form-label>
        <nz-form-control [nzSpan]="24" nzHasFeedback>
          <input nz-input formControlName="bankAccountNum" placeholder="请输入收款银行账号" nzRequired>
          <nz-form-explain *ngIf="bankForm.get('bankAccountNum').dirty&&bankForm.get('bankAccountNum').errors">请输入收款银行账号
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item nz-row>
        <nz-form-control [nzSpan]="14">
          <label nz-checkbox formControlName="isDefault">
            <span>设为默认收款银行</span>
          </label>
        </nz-form-control>
      </nz-form-item>

    </form>

    <div class="from-footer">
      <button nz-button [disabled]="!bankForm.valid" nzType="default" (click)="onAddBank(bankForm.value)">确认</button>
      <button nz-button nzType="primary" (click)="handleCancel()" [nzLoading]="isConfirmLoading">取消</button>
    </div>
  </ng-template>

</nz-modal>